<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>playerTools</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/vant.css"> -->
    <link rel="stylesheet" href="../../css/elementui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../font/iconfont.css" />

    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <!-- <script type="text/javascript" src="../script/vue.min.js"></script>
     <script type="text/javascript" src="../script/vant.min.js"></script> -->
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <link rel="stylesheet" type="text/css" href="../../script/zyMedia/zy.media.min.css" />
    <script type="text/javascript" src="../../script/zyMedia/zy.media.min.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .head {
            padding: 25px 15px 10px 15px;
            box-shadow: 0px 1px 5px rgb(200, 198, 198);
            background: #f7f8fa;
        }

        .head .van-cell {
            border: 1px solid #c1daff;
            border-radius: 12px;
            padding: 6px 10px;
        }

        .row {
            text-align: center;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0px 1px 5px rgb(200, 198, 198);
            position: relative;
        }

        .row-type {
            position: absolute;
            left: 0;
            top: 0;
            padding: 2px 5px;
            background: rgba(61, 134, 208, 0.5);
            color: #fff;
            font-size: 13px;
            border-top-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .row-title {
            font-size: 21px;
            height: 80px;
            position: relative;
        }

        .row-title span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 95%;
        }

        .stepper {
            padding: 12px 0;
            background-color: #ececec;
        }

        .content {
            padding: 20px;
        }

        .van-stepper__input {
            margin: 0 6px;
            background-color: #fff;
        }

        .van-stepper__minus,
        .van-stepper__plus {
            background-color: #fff;
        }

        .total {
            display: inline-block;
            line-height: 44px;
            margin-right: 30px;
            color: #9e9e9e;
            font-size: 16px;
        }

        .total span {
            color: #cd1b21;
            font-weight: 700;
            font-size: 19px;
        }

        .sub {
            /* border-left: 1px solid #dcdcdc; */
            padding-left: 15px;
        }

        .more {
            font-size: 14px;
            color: #4f8af7;
            line-height: 40px;
        }

        .more>* {
            vertical-align: middle;
        }

        .prod {
            font-size: 14px;
        }

        .head .van-col,
        .content .van-col {
            margin-bottom: 15px;
        }

        .col-padding {
            padding: 0 10px;
        }

        .p {
            width: 400px;
        }

        .p1 {
            width: 800px;
        }

        .highlight {
            box-shadow: 0px 0px 10px rgba(61, 134, 208, 1);
        }

        .light-r {
            animation: load 0.8s 4 alternate;
        }

        @keyframes load {
            0% {
                box-shadow: inset 0px 0px 100px 10px rgba(61, 134, 208, 0.6);
            }

            100% {
                box-shadow: inset 0px 0px 20px 10px rgba(61, 134, 208, 0.1);
            }
        }

        .cg {
            position: fixed;
            left: 0;
            top: 100px;
            background: #1989fa;
            color: #fff;
            font-size: 13px;
            width: 24px;
            text-align: center;
            padding: 10px 0;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }

        .delete {
            width: 40px;
            padding-right: 15px;
            line-height: 43px;
        }

        .delete img {
            width: 100%;
        }

        .bc {
            color: #83bff6;
        }

        .head .van-field__label {
            width: 60px;
        }

        .st-red button,
        .st-red input {
            color: #ca1c30;
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        .yellow {
            color: yellow;
        }

        .full-screen {
            position: fixed;
            width: 100%;
            height: 500px;
            top: 0px;
            left: 0px;
            background-color: #000
        }

        .video-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="视频播放" left-arrow @click-left="onClickLeft">
            </van-nav-bar-main>

            <div class="full-screen">
                <video id="myVideo" class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
                    <source src="../1.mp4" type='video/mp4'>
                </video>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;

    apiready = function () {

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                videoPath: api.pageParam.videoPath
            },
            created: function () {
                var that = this;
                setTimeout(() => {
                    this.startToPlay()
                }, 200);
            },
            methods: {
                //开始播放
                startToPlay() {
                    var that = this;

                    if (that.videoPath) {
                        $("#myVideo").attr('src', that.videoPath);
                    }

                    setTimeout(function () {
                        zymedia('video', {
                            videoWidth: '100%',
                            autoplay: true
                        })
                    }, 200);
                },
                onClickLeft: function () {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>